import React, { useState } from "react";
import { Button } from "antd";
import './small.less';
import '../immer/immer.less';

function Small() {
  const [ val, setVal ] = useState(0);
  const handleValChange = () => {
    /*
      * 因为react数组快照模式的缘故，只记录了定义时数据的值, 所以直接在setVal中调用val，那么val的值就会被被认为是0，解决方法是套上一层函数
      * 如果是下面写法的话，执行了三次，那么val的值只会是1
        1. setVal(val + 1);
           setVal(val + 1);
           setVal(val + 1);
      * 如果是下面的写法的话，那么val的值也只会是1
        1.
           setVal((val) => val + 1);
           setVal(val + 1);
      * 想要连续执行三次，得到3，那么应该照着下面这么写
        * 原理是：第一次执行完，会把val的值传给下一个setVal，作为函数的参数
    */
    setVal((val) => val + 1);
    setVal((val) => val + 1);
    setVal((val) => val + 1);
  };
  return (
    <div className="common-ele">
      <h1>一些小坑</h1>
      <Button onClick={handleValChange}>点击</Button>
      <div className="test">{ val }</div>
    </div>
  )
}
export default Small;